<template>
	<div class="pass_rules_wrapper">
		<h4>密码复杂度</h4>
		<el-radio-group v-model="passComplexity" @change="handlePassLevelChange" :disabled="isHasSettingAuth">
			<el-radio label="1">
				<h5>简单</h5>
				<p>该级别为8到18位任意字符的密码</p>
			</el-radio>
			<el-radio label="2">
				<h5>标准</h5>
				<p>该级别为8到18位必须包含数字和大小写字母的密码</p>
			</el-radio>
			<el-radio label="3">
				<h5>困难</h5>
				<p>该级别为12到24位必须包含数字、大小写字母和特殊字符的密码</p>
			</el-radio>
		</el-radio-group>
	</div>
</template>

<script>
import lodash from 'lodash';
import { mapGetters } from 'vuex';
import authBtns from '@/mixins/authButtons';
import { updatePasswordRuleSeeting } from '@/api/system/tbSysSite';
export default {
	name: 'passRulesPage',
	data() {
		return {
			passComplexity: '1'
		};
	},
	computed: {
		...mapGetters(['siteInfo', 'authButton']),
		configData() {
			let passwordLen1, passwordLen2;
			if (this.passComplexity === '1') {
				passwordLen1 = 8;
				passwordLen2 = 18;
			} else if (this.passComplexity === '2') {
				passwordLen1 = 8;
				passwordLen2 = 18;
			} else if (this.passComplexity === '3') {
				passwordLen1 = 12;
				passwordLen2 = 24;
			}
			return { passwordLen1, passwordLen2 };
		},
		isHasSettingAuth() {
			let btns = authBtns[this.$options.name] || [];
			let setting = lodash.find(btns, { field: 'setting' });
			return !lodash.some(this.authButton, { id: setting?.id });
		}
	},
	mounted() {
		this.passComplexity = this.siteInfo.passwordLevel;
	},
	methods: {
		async handlePassLevelChange() {
			let passwordLevel = this.passComplexity;
			let params = { id: this.siteInfo.id, ...this.configData, passwordLevel };
			let result = await updatePasswordRuleSeeting(params).then((res) => res.data);
			if (result.code === '0') {
				this.$showCustomMessage('success', `修改密码规则成功`);
				this.$store.dispatch('getSiteBaseInfo');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.pass_rules_wrapper {
	padding: 20px;
	.el-radio {
		display: flex;
		padding: 10px 0;
		margin-right: 0;
	}
	&:deep(.el-radio__inner) {
		width: 16px;
		height: 16px;
		&::after {
			width: 6px;
			height: 6px;
		}
	}
	h4 {
		font-size: 18px;
		line-height: 1;
		margin-bottom: 10px;
	}
	h5 {
		font-size: 16px;
		line-height: 1;
		font-weight: normal;
	}
	p {
		color: #909399;
		line-height: 1;
		margin-top: 10px;
	}
}
</style>
